<template>
<div>
  <div v-show="personnelEdit" class="mod-config">
    <div class="div-s" ref="divs">
    <el-form :model="params" :label-position="labelPosition" :inline="true" label-width="70px" class="queryFormed">
        <el-row class="row-s">
      <el-col :span="6">
          <el-form-item label="证书名称">
            <el-input v-model="params.name" clearable placeholder="请填写证书名称"></el-input>
          </el-form-item>
      </el-col>
      <el-col class="col-center" :span="6">
      <el-form-item class="fazheng" label="到期日期">
            <el-date-picker type="date" v-model="params.expireDate" placeholder="请选择到期日期" style="width:100%"></el-date-picker>
      </el-form-item>
      </el-col>
      <el-col class="col-center" :span="6">
          <el-form-item label="发证机构">
            <el-input v-model="params.releaseOrgan" clearable placeholder="请填写发证机构"></el-input>
          </el-form-item>
      </el-col>
      <el-col class="col-right" :span="6">
      <el-form-item class="item-all">
      <el-button class="buttonItem" size="mini" plain @click="queryAll()">重 置</el-button>
      <el-button class="buttonItem" size="mini" type="primary" @click="querySeek()">搜 索</el-button>
      </el-form-item>
      </el-col>
      </el-row>
    </el-form>
    </div>
    <div class="div-e">
    <div class="div-inquire" ref="divInquire">
        <div class="in-t">
          <div class="in-ts"></div>
          <h3>ISO证书列表</h3>
        </div>
        <div class="div-button">
        <el-button class="div-buttonItemb" size="mini" type="primary" plain icon="el-icon-upload2" @click="exportXls()">证书导出</el-button>
        <el-button class="div-buttonItema" type="primary" plain size="mini" icon="el-icon-plus" @click="certificateinfoCrashHandler()">新增</el-button>
        </div>
      </div>
    <!-- 表单 -->
    <div class="mod-s">
    <div class="location">
    </div>
    <el-table
      :data="dataList"
      @sort-change='sort_change'
      :max-height="tableHeight"
      v-loading="dataListLoading"
      :header-cell-style="{background:'#F5F7FA'}"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column
        prop="name"
        min-width="70"
        sortable='custom'
        align="center"
        label="证书名称">
      </el-table-column>
      <el-table-column
        prop="code"
        min-width="110"
        sortable='custom'
        align="center"
        :formatter="dateFormats"
        label="证书编号">
      </el-table-column>
      <el-table-column
        prop="coverage"
        align="center"
        min-width="80"
        :formatter="dateFormats"
        sortable='custom'
        label="认证范围"
       >
      </el-table-column>
      <el-table-column
        prop="releaseOrgan"
        min-width="100"
        sortable='custom'
        align="center"
        :formatter="dateFormats"
        label="发证机构"
        >
      </el-table-column>
      <el-table-column
        min-width="100"
        sortable='custom'
        align="center"
        :formatter="dateFormats"
        label="到期日期"
        >
        <template slot-scope="scope">
         <span v-if="scope.row.longTerm === 1">长期有效</span>
         <span v-if="scope.row.longTerm === 0">{{scope.row.expireDate}}</span>
        </template>
      </el-table-column>
        <el-table-column
        prop="warningCount"
        min-width="100"
        sortable='custom'
        align="center"
        label="证书预警"
        >
        <template slot-scope="scope">
         <span v-if="scope.row.longTerm === 0">
           <span v-if="scope.row.warningCount == null">
            -
          </span>
          <span v-else-if="scope.row.warningCount < 0">
            <span class="font_family icon-tuoyuan1" style="color:#E96E6E"></span>已逾期
          </span>
          <span v-else-if="scope.row.warningCount > 90">
          <span class="font_family icon-tuoyuan1" style="color:#6EE976"></span>未到期
          </span>
          <span v-else>
          <span class="font_family icon-tuoyuan1" style="color:#E9D56E"></span>还有{{scope.row.warningCount}}天到期
          </span>
         </span>

         <span v-if="scope.row.longTerm === 1">
          未到期
         </span>
        </template>
      </el-table-column>
      <el-table-column
        min-width="90"
        align="center"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" style="color:#6E92E9;" size="mini" @click="addOrUpdateHandle(scope.row)">查看</el-button>
          <span style="color:#E8E8E8;">|</span>
          <el-button type="text" style="color:#6E92E9;" size="mini" @click="addOrUpdateModification(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      ref="pagHe"
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[5, 10, 20, 50, 100, 200]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, prev, pager, next, sizes, jumper">
    </el-pagination>
    </div>
    </div>
  </div>
  <subfolder-manual v-if="subfolderManual" :img="img" :dataIsoRow = dataIsoRow :ISO = ISO @qualifications=qualifications></subfolder-manual>
  <iso-deteil :rowId = rowId v-if="subfolderDeteil" @clickgoto="clickgoto" :qualificationEdit="qualificationEdit"></iso-deteil>
  </div>
</template>

<script type="text/jsx">
  import $ from 'jquery'
  import 'vue2-org-tree/dist/style.css'
  import SubfolderManual from './subfolder/subfolder-manual'
  import merge from 'lodash/merge'
  import Vue from 'vue'
  import IsoDeteil from './subfolder/iso-deteil.vue'
  import { eventBus } from '../../../../eventBus'
  export default {
    data () {
      return {
        labelPosition:'right',
        ISO:false,
        unfold:true,
        kiveList:false,
        qualificationEdit:true,
        subfolderManual:false,
        subfolderDeteil:false,
        queryModelVisible: false,
        detailsVisible: false,
        personnelEdit:true,
        dataForm: {
          key: ''
        },
        dataList: [],
        img:[],
        pageIndex: 1,
        pageSize: 20,
        totalPage: 0,
        rowName:'',
        rowId:'',
        dataIsoRow:{},
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        deptAddOrUpdateVisible: false,
        data: [],
        defaultProps:{
        children: "children",
        label: "label",
        },
        heightis: 267,
        horizontal: false,
        collapsable: true,
        dataEditList:[],
        expandAll: true,
        labelClassName: "bg-orange",
        tenantId: 0,
        params:{
        name:'',
        expireDate:'',
        releaseOrgan:''
        },
        deptId: '',
        ascFlag:null,
        tableHeight:0,
        orderBy:''
      };
    },
    components: {
      SubfolderManual, IsoDeteil
    },
    created(){
      this.getDataList()
    },
    mounted() {
      this.$nextTick(() => {
            this.tableHeight = window.innerHeight - 267;
            //后面的50：根据需求空出的高度，自行调整
        })
        eventBus.$on('iso',(msg)=>{
        this.kiveList = msg
        this.clickKive()
      })
    },
    computed: {
    myHeader () {
      return {
        'token': Vue.cookie.get('token')
      }
     }
    },
    watch:{
    },
    methods: {
      clickKive(){
      if (this.kiveList) {
        this.subfolderManual = false
        this.personnelEdit = true
        this.subfolderDeteil = false
      }
      },
      sort_change(column){
      this.orderBy = column.prop
      if(column.order =='ascending'){
        this.ascFlag = true
      }
      if(column.order =='descending'){
        this.ascFlag = false
      }
      this.getDataList()
      },
      certificateinfoCrashHandler(){
        this.ISO = true
        this.personnelEdit = false
        this.subfolderManual = true
        this.subfolderDeteil = false
      },
      clickgoto(){
      this.personnelEdit = true
      this.subfolderDeteil = false
      },
      qualifications(){
        this.personnelEdit = true
        this.subfolderManual = false
        this.subfolderDeteil = false
        this.getDataList()
      },
      dateFormats(row, column, cellValue, index){
      if (!Boolean(cellValue)) {
                return "-";
            } else {
                return cellValue;
            }
      },
      // 搜索
      querySeek(){
      this.getDataList()
      },
      qualificationddd(){
        this.personnelEdit = true
        this.subfolderManual = false
        this.abc = true
        this.getDataList()
      },
      postImg(){
      this.img = []
      this.img.length = 0
      },
      // 修改
      addOrUpdateModification(row){
      if(row.cercertiPic !== null){
      this.img.push({
        url: row.certiPic
      })
      }else{
        this.img[0] = ''
      }
      this.personnelEdit = false
      this.subfolderManual = true
      this.subfolderDeteil = false
      this.ISO = false
      this.dataIsoRow = row
      },
      exportXls(){
      this.$http({
          url: this.$http.adornUrl('/cert/entIso/export'),
          method: 'post',
          responseType: 'blob', // 防止返回乱码
          data: this.$http.adornData({}),
          showLoading: true
        }).then(({data}) => {
          if (data) {
            const link = document.createElement('a')
            let blob = new Blob([data], {type: 'application/vnd.ms-excel'})
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            let fileName = 'ISO证书统计.xls'
            link.setAttribute('download', fileName)
            link.download = fileName // 下载的文件名
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
          }
        })
      },
      // 获取部门中的人员数据
      getDataList () {
        this.dataListLoading = true
        if(this.params.name == ''){
          this.params.name = null
        }
        if(this.params.expireDate == ''){
          this.params.expireDate = null
        }
        if(this.params.releaseOrgan == ''){
          this.params.releaseOrgan = null
        }
        if(this.orderBy == ''){
          this.orderBy = null
        }
        this.$http({
          url: this.$http.adornUrl('/cert/entIso/paging'),
          method: 'post',
          data: this.$http.adornData({
            'pageNum': this.pageIndex,
            'pageSize': this.pageSize,
            'ascFlag':this.ascFlag,
            'orderBy':this.orderBy,
            'name':this.params.name,
            'expireDate':this.$dateFormat(this.params.expireDate),
            'releaseOrgan':this.params.releaseOrgan,
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.data.records
            this.totalPage = data.data.total
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      addOrUpdateHandle (row) {
        this.rowName = row.name
        this.rowId = row.id
        this.personnelEdit = false
        this.subfolderManual = false
        this.subfolderDeteil = true
      },
      clickAppear(){
      this.personnelEdit = true
      },
      queryHandle(){
        this.queryModelVisible = true
        this.$nextTick(() => {
          this.$refs.queryModel.init()
        })
      },
      detailsHandle(id){
        this.detailsVisible = true
        this.$nextTick(() => {
          this.$refs.employeeDetails.init(id)
        })
      },
      queryAll(){
        this.params.name = ''
        this.params.expireDate = ''
        this.params.releaseOrgan = ''
        this.getDataList()
      }
    }
  }
</script>
<style lang="scss" scoped>
/deep/.daochushuju{
  font-size: 14px !important;
  i{
    font-size: 16px !important;
  }
}
/deep/.font_family{
  font-size: 15px !important;
}
.div-e{
  width: 100%;
  background-color: #FFFFFF;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
  margin-top: 15px;
    overflow: hidden;
    .mod-tree{
    margin-top: 10px;
    width: 20%;
    height: 100%;
    border-right: 1px solid #F0F2F7;
    float: left;
    overflow: hidden;
  .custom-tree-node{
    width: 300px;
    overflow: hidden;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
    .el-icon-edit{
      float: right;
    }
    .el-icon-delete{
    float: right;
    }
    .el-icon-circle-plus-outline{
      float: right;
    }
    i{
    width: 20px;
    margin-left: 3px;
    }
   }
  /deep/.el-tree-node__content{
  height: 40px !important;
  }
  /deep/.el-tree-node:focus > .el-tree-node__content {
    background-color: #f0f7ff !important;
    color: #409EFF !important;
  }
  }
  .mod-s{
  width: 100%;
  overflow: hidden;
  margin-top: 10px;
  }
}
.div-inquire{
  width: 100%;
  height: 45px !important;
  background-color: #ffffff;
  // display: flex;
  // align-items: center;
}
.div-button{
  width: 30%;
  float: right;
  margin-top: 15px;
}
.div-buttonItemb{
  float: right;
  font-size: 14px;
  i{
    font-size: 16px;
  }
}
.div-buttonItema{
  float: right;
  font-size: 14px;
  margin-right: 10px;
  i{
    font-size: 16px;
  }
}
.in-t{
  width: 50%;
  float: left;
  height: 45px;
  display: flex;
  align-items: center;
  // margin-top: 15px;
  h3{
    float: left;
    font-size: 16px;
    margin: 0px !important;
    padding: 0px !important;
    color: #000000;
  }
}
.in-ts{
  width: 5px;
  height: 18px;
  float: left;
  margin-right: 8px;
  background: #6E92E9;
}
.div-s{
  width: 100%;
  background-color: #FFFFFF;
}
  .queryFormed .el-form-item{
    margin-top: 8px;
    margin-bottom: 8px;
  }
  /deep/.queryFormed .el-form-item{
    .el-select .el-input__inner{
    height: 36px!important;
    padding-right: 15px!important;
    padding-left: 15px!important;
    }
    .el-input--suffix .el-input__inner{
    padding-right: 15px!important;
    padding-left: 15px!important;
    }
  }
  .row-s{
  /deep/.el-col{
    display: flex;
    // justify-content: center;
    align-items: center;
    padding-left: 15px;
    padding-right: 15px;
  }
}
/deep/.col-right{
.el-form-item{
margin-left: auto!important;
}
}
/deep/.el-col{
    .fazheng{
    .el-form-item__content{
    .el-input--suffix{
    .el-input__inner{
      padding-right: 0px!important;
      padding-left: 30px!important;
       }
     }
   }
 }
}
/deep/.col-center{
  display: flex;
  align-items: center;
  justify-content: center;
}
.dept-s{
  width: 100%;
  height: 50px;
  color: #303133;
  font-size: 14px;
  background-color: #F5F7FA;
  .dept-a{
    width: 60%;
    height: 50px;
    padding-left: 20px;
    float: left;
    display: flex;
    align-items: center;
    // justify-content: center;
  }
  .dept-b{
    float: right;
    width: 40%;
    height: 50px;
    padding-left: 20px;
    display: flex;
    align-items: center;
    // justify-content: center;
  }
}
// 分页颜色控制
 .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color: #409EFF !important;
    color: #fff !important;
  }
.el-tree .el-tree-node__expand-icon.expanded 
{  
-webkit-transform: rotate(0deg);  
transform: rotate(0deg);
}
.picturess{
  font-size: 16px !important;
}
  .seek-s{
  width: 230px;
  float: left;
  }
  .sousuo{
  margin-left: 15px;
  height: 100%;
    // margin-top: 2px;
  font-size: 14px !important;
  i{
    font-size: 16px;
  }
    float: left;
  }
/deep/.buttonItem{
  // float: left;
  // margin-left: 15px;
  font-size: 14px !important;
  i{
    font-size: 16px;
  }
  }
// .el-tree-node{
//   margin-top: 10px;
// }
// /deep/.el-tree-node__content{
//   padding-left: 0px !important;
// }
// 树状图的样式

.mod-config{
  overflow: hidden;
  // margin-top: 48px;
  padding: 15px !important;
  background-color: #F5F7FA !important;
  // margin-top: 10px;
}

  .org-tree-node-label {
    white-space: nowrap;
  }
  /deep/.el-button--success.is-plain{
    height: 33px;
  }
  .bg-white {
    background-color: white;
  }
  .bg-orange {
    background-color:#fc8e2d;
    color: #ffffff;
  }
  .bg-gold {
    background-color: gold;
  }
  .bg-gray {
    background-color: gray;
  }
  .bg-lightpink {
    background-color: lightpink;
  }
  .bg-chocolate {
    background-color: chocolate;
  }
  .bg-tomato {
    background-color: tomato;
  }
  /deep/ .button-s{
    margin-left: 0px !important;
  }
  .el-button--danger {
    color: #f56c6c;
    background-color: #fff;
    border-color: #f56c6c;
  }
  .el-button--primary{
    background-color: #fc8e2d;
     border-color: #fc8e2d;
  }
  .org-tree-node-label{
    cursor: pointer;
  }
  .custom-outline{
    float: right;
    margin-right: 20px;
  }
  .el-message-box__btns {
    margin-bottom: 10px;
    margin-top: 15px;
  }
  .el-message-box__title {
    margin-top: 10px;
    margin-bottom: 15px;
  }
</style>
